<template>
  <div class="callTipDialogDiv">
    <el-dialog
      append-to="callTipDialogDiv"
      v-model="dialogVisible"
      title="Tips"
      width="300"
      draggable
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
      :fullscreen="false"
    >
      <template #header>
        <div class="flex justify-between font-size-12px text-inherit">
          <div>拨号键盘贴片[可拖动]</div>
          <div class="cursor-pointer text-#337ecc">
            <span @click="close"
              ><el-icon><CloseBold /></el-icon
            ></span>
          </div>
        </div>
      </template>

      <ContentWrap class="content mt-15px" id="callBoardDialogDiv">
        <div v-if="data">
          <div
            class="flex w-full justify-center items-center text-black"
            :style="{ color: statusCom[data.status].color }"
          >
            <Icon :icon="statusCom[data.status]?.icon" class="mr-4px"></Icon>
            {{ statusMap[data.status] }}
          </div>
        </div>
        <div class="h-46px text-center text-22px lh-30px">
          <el-input class="phoneNum" v-model.trim="numStr" maxlength="11"></el-input>
        </div>
        <div class="grid grid-cols-3 grid-rows-4 items-center grid-gap-10px">
          <div
            @click="handleClickNum(item.num)"
            v-for="item in numList"
            :key="item.num"
            class="m-auto h-55px w-55px flex flex-col cursor-pointer items-center rd-50% bg-gray-1"
          >
            <span class="pt-6px text-22px font-700">{{ item.num }}</span>
            <label class="text-11px" v-if="item.label != null">{{ item.label }}</label>
          </div>
        </div>
        <el-row class="relative mt-20px items-center">
          <div
            class="m-auto h-55px w-55px flex cursor-pointer items-center justify-center rd-50% bg-#0052cc"
          >
            <Icon
              :size="30"
              color="#fff"
              icon="fa-solid:phone-alt"
              @click="onCall"
              v-if="!showHangup"
            />
            <Icon :size="30" color="#FFF" icon="fa:close" @click="onHangup" v-else />
          </div>
          <div
            @click="handleDelNum"
            class="delIcon left-82% h-18px w-24px flex cursor-pointer items-center justify-center bg-gray-1"
          >
            <Icon :size="14" color="#000" icon="ep:close-bold" />
          </div>
        </el-row>
      </ContentWrap>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
import { usePhoneStore } from '@/store/modules/phone'
import WebPhone from '@/hooks/web/useCall'
import { useKeyup } from '@/hooks/event/useKeyup'

defineOptions({ name: 'CallBoard' })

const { init } = useKeyup({
  callback: (key) => {
    if (key.match(/^\d+$/)) {
      handleClickNum(key)
    }
    if (key == 'Backspace') {
      handleDelNum()
    }
  }
})

const numList = ref([
  {
    num: 1,
    label: null
  },
  {
    num: 2,
    label: 'ABC'
  },
  {
    num: 3,
    label: 'DEF'
  },
  {
    num: 4,
    label: 'GHI'
  },
  {
    num: 5,
    label: 'JKL'
  },
  {
    num: 6,
    label: 'MNO'
  },
  {
    num: 7,
    label: 'PQRS'
  },
  {
    num: 8,
    label: 'TUV'
  },
  {
    num: 9,
    label: 'WXYZ'
  },
  {
    num: '*',
    label: null
  },
  {
    num: 0,
    label: '+'
  },
  {
    num: '#',
    label: null
  }
])
const numStr = ref('')
const handleClickNum = (num) => {
  if (numStr.value.length < 11) {
    numStr.value = numStr.value + num
  }
}
const handleDelNum = () => {
  numStr.value = numStr.value.substring(-1, numStr.value.length - 1)
}
const dialogVisible = ref(false)
const useStore = usePhoneStore()
const statusMap = {
  ringing: '呼叫中',
  progress: '呼叫中',
  accepted: '正在通话',
  reject: '拒接',
  cancel: '已挂断',
  failed: '呼叫失败',
  ended: '已挂断',
  missed: '系统繁忙'
}
const statusCom = {
  ringing: {
    icon: 'ep:phone',
    color: '#0052cc'
  },
  progress: {
    icon: 'ep:phone',
    color: '#0052cc'
  },
  accepted: {
    icon: 'ep:microphone',
    color: '#67C23A'
  },
  reject: {
    icon: 'ep:remove',
    color: '#F56C6C'
  },
  cancel: {
    icon: 'ep:switch-button',
    color: '#E6A23C'
  },
  failed: {
    icon: 'ep:remove',
    color: '#F56C6C'
  },
  ended: {
    icon: 'ep:switch-button',
    color: '#E6A23C'
  },
  missed: {
    icon: 'ep:refresh-right',
    color: '#909399'
  }
}
const data = computed(() => {
  return useStore.session || null
})

const showHangup = computed(() => {
  if (!data.value) {
    return false
  }
  return (
    data.value.status == 'ringing' ||
    data.value.status == 'progress' ||
    data.value.status == 'accepted'
  )
})

const open = async () => {
  if (!dialogVisible.value) {
    dialogVisible.value = true
  }
  // init()
}

const close = () => {
  useStore.setVisible(false)
  dialogVisible.value = false
}

const onHangup = () => {
  WebPhone.getInstance().hangup()
}

const onCall = () => {
  if (numStr.value.length == 11 && numStr.value != '') {
    WebPhone.getInstance().call({
      callee: numStr.value,
      source: 'none',
      sourceId: null
    })
  } else {
    ElMessage.error('请检查手机格式')
  }
}

defineExpose({ open, close }) // 提供 open 方法，用于打开弹窗
</script>

<style>
.delIcon {
  position: absolute;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.delIcon:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  left: -9px;
  border-top: solid 9px transparent;
  border-right: solid 9px #f3f4f6;
  border-bottom: solid 9px transparent;
}

.callTipDialogDiv .el-overlay-dialog {
  pointer-events: none;
}

.callTipDialogDiv .el-dialog {
  margin-right: 20px;
  pointer-events: auto;
  background: linear-gradient(to bottom, #98b0ec, #d0d5fe);
  border-radius: 10px;
}

.callTipDialogDiv .el-overlay-dialog {
  right: 18px;
}

.callTipDialogDiv > div:first-of-type {
  inset: inherit !important;
}
</style>
<style scoped lang="scss">
::v-deep .phoneNum {
  font-size: 22px;
  .el-input__wrapper {
    background: #ebedf150;
    border-radius: 16px;
    text-align: center;
    border: 2px solid #eff3f690;
    .el-input__inner {
      text-align: center;
      color: #000;
    }
  }
  .is-focus {
    box-shadow: none !important;
  }
}
.callTipDialogDiv {
  ::v-deep(.el-dialog__body) {
    padding: 4px 10px;
  }

  ::v-deep(.el-dialog__header) {
    padding-top: 10px;
    margin-right: 0;
    background: #ecf0f390;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }

  .content {
    background: #ffffff83;
    div,
    span,
    label {
      -webkit-user-select: none; /* Chrome, Safari, Opera */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none;
    }
  }

  .transparent {
    ::v-deep(.el-descriptions__body) {
      color: #fff;
      background: transparent;
    }
  }

  ::v-deep(.el-textarea__inner::-webkit-scrollbar) {
    display: none;
  }

  ::v-deep(.el-textarea__inner) {
    padding-bottom: 30px;
    background: rgba($color: #fff, $alpha: 80%);
  }

  ::v-deep(.el-descriptions__content:not(.is-bordered-label)),
  ::v-deep(.el-descriptions__label:not(.is-bordered-label)) {
    font-size: 12px;
  }
}
</style>
